<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>博客</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <!--// Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Owl-Carousel-CSS -->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" media="all" />
    <link href='/static/css/simplelightbox.min.css' rel='stylesheet' type='text/css'>

    <script src="/static/JQuery/jquery-3.4.1.min.js"></script>
    <script src="/static/bootstrap/bootstrap/bootstrap.min.js"></script>

    <style>
      .mytextarea {
        width: 100%;
        overflow: auto;
        word-break: break-all;
        height: 100px;
        color: #000;
        font-size: 1em;
        resize: none;
      }
    </style>
  </head>
  <body>
  <!--导航栏-->
  <!-- sticky navigation -->
  <div class="nav-links">
    <nav class='navbar navbar-default'>
      <div class='container'>
        <div class='collapse navbar-collapse'>
          <ul style="position: relative">
            <li>
              <!--						<a href="/user/index">主页</a>-->
              <a th:href="@{/user/index}">主页</a>
            </li>
            <li>
              <!--						<a href="/user/about">流浪猫狗知识</a>-->
              <a th:href="@{/user/about}">流浪猫狗知识</a>
            </li>
            <li>
              <a th:href="@{'/user/toPersonal?id='+${session.user.id}}">个人中心</a>
              <!--						<a href="/user/personal">个人中心</a>-->

            </li>
            <li>
              <a th:href="@{/goodsy/getAGoodsyAll}">救助商品</a>
            </li>
            <li>
              <a th:href="@{/adopt/login}">领养中心</a>
            </li>
            <li th:unless="${session.user.userName eq null}">
              <a th:href="@{/user/blog}">博客</a>
            </li>
            <li th:if="${session.user.userName eq null}">
              <button class="btn-primary btn-lg loging" data-toggle="modal" data-target="#login">注册/登录</button>
            </li>
            <li th:unless="${session.user.userName eq null}" >
              <button class="btn-primary btn-lg" data-toggle="modal" data-target="#editUsers">修改</button>
            </li>
            <li>
              <span th:text="当前用户+'：'+${session.user.userName}"></span>
            </li>
            <button th:unless="${session.user.userName eq null}"style="position: absolute;right: -70px;top: 5px" class="btn-primary btn-lg exit">退出</button>
          </ul>
        </div>
      </div>
    </nav>
  </div>


  <input type="hidden" name="" th:value="${session.user.userName}" id="userName">
  <input type="hidden" name="" th:value="${session.user.id}" id="userId">
    <!-- blog -->
    <!-- 修改班级模态框 -->
    <div
      class="modal fade"
      id="editUsers"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabe"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="myModalLabe">修改用户信息</h4>
          </div>
          <div class="modal-body">
            <form
              class="form-horizontal"
              id="edit_admin_form"
              action="/user/updatePersonInfo"
              method="post"
            >
              <input
                type="hidden"
                id="edit_id"
                name="id"
                th:value="${session.user.id}"
              />
              <div class="form-group">
                <label for="edit_userName" class="col-sm-2 control-label">
                  用户名称
                </label>
                <div class="col-sm-4">
                  <input
                    type="text"
                    class="form-control"
                    id="edit_userName"
                    placeholder="用户名称"
                    name="userName"
                    th:value="${session.user.userName}"
                  />
                </div>
                <label for="edit_password" class="col-sm-2 control-label">
                  用户密码
                </label>
                <div class="col-sm-4">
                  <input
                    type="text"
                    class="form-control"
                    id="edit_password"
                    placeholder="用户密码"
                    name="password"
                    th:value="${session.user.password}"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="edit_sex" class="col-sm-2 control-label">
                  性别
                </label>
                <div class="col-sm-4">
                  <select
                    class="form-control"
                    id="edit_sex"
                    name="sex"
                    th:value="${session.user.sex}"
                  >
                    <option value="1">男</option>
                    <option value="0">女</option>
                  </select>
                </div>
                <label for="edit_telephone" class="col-sm-2 control-label">
                  电话号码
                </label>
                <div class="col-sm-4">
                  <input
                    type="text"
                    class="form-control"
                    id="edit_telephone"
                    th:value="${session.user.phone}"
                    placeholder="电话"
                    name="phone"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="edit_Email" class="col-sm-2 control-label">
                  Email
                </label>
                <div class="col-sm-4">
                  <input
                    type="text"
                    class="form-control"
                    id="edit_Email"
                    placeholder="Email"
                    th:value="${session.user.email}"
                    name="email"
                  />
                </div>
                <label for="edit_address" class="col-sm-2 control-label">
                  地址
                </label>
                <div class="col-sm-4">
                  <input
                    type="text"
                    class="form-control"
                    id="edit_address"
                    placeholder="地址"
                    name="address"
                    th:value="${session.user.address}"
                  />
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn-default" data-dismiss="modal">
                  关闭
                </button>
                <button type="submit" class="btn-primary">保存修改</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="container">
        <h2>发布博客</h2>
        <p>
          多媒体对象可以设置头部、居中、底部对齐，对应的类分别是 "media-top"、
          "media-middle" 、 "media-bottom":
        </p>
        <br />
        <div class="commentbox">
          <textarea
            cols="80"
            rows="50"
            placeholder="来说几句吧......"
            class="mytextarea"
            id="content"
          ></textarea>
          <input
            id="id"
            type="hidden"
            name="id"
            th:value="${session.user.id}"
          />
          <div class="file-loading">
            <input id="file" type="file" multiple />
            <input type="hidden" id="uploadVal" />
          </div>
          <button
            id="comment"
            class="btn-primary btn-lg"
            onClick="handleSend()"
          >
            发布
          </button>
        </div>
        <div class="media" th:each="list,status:${list}">
         <div class="media-left media-top">
            <img
              src="https://static.runoob.com/images/mix/img_avatar.png"
              class="media-object"
              style="width: 80px"
            />
          </div>
          <div class="media-body" id="mediaBody">
             <h4 class="media-heading" th:text="${list.author}">
              <small><i th:text="12312"></i></small>
            </h4>
            <p th:text="${list.title}">这是博客得标题内容</p>
            <div>
              <img
                th:src="${list.picture}"
                class="img-rounded"
                style="width: 300px"
              />
            </div>
            <input type="text" id="comments" class="replyComment" placeholder="请输入评论内容"/>
            <button  class="btn-primary btn-lg" th:onclick="'javascript:handleComment('+${list.id}+','+${status.index}+','+${session.user.id}+')'">评论</button>
            <div style="border-bottom: 1px solid #999999;box-sizing: border-box;padding-bottom: 15px;box-shadow: 0 0 10px 0 #333333" class="media" th:each="comment:${list.replyList}">
              <div class="media-body">
                评论人:<h4 class="media-heading" th:text="${session.user.userName}">
                </h4>
                内容:<p style="margin-bottom: 15px" th:text="${comment.reply}"></p>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- //Modal5 -->
    <!-- //blog -->
    <!-- js -->

    <!-- Necessary-JavaScript-File-For-Bootstrap -->
    <!-- //js -->
    <script>
      $(document).ready(function () {
        let file = document.querySelector("#file");
        // /common/upload
        file.addEventListener("change", (e) => {
          console.log("----e---", e.target.files);
          let fd = new FormData();
          fd.append("file", e.target.files[0]);
          let xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              const res = JSON.parse(xhr.responseText);
              if (xhr.status === 200) {
                // 上传成功
                console.log("上传成功", res);
                $("#uploadVal").val(res);
              } else {
                // 上传失败
                console.log("上传失败", res);
              }
            }
          };
          xhr.open("POST", "http://localhost:8081/file/upload", true);
          //   xhr.setRequestHeader(
          //     'Auth_Token',
          //    ''
          //   )
          console.log('----',fd);
          xhr.send(fd);

          console.log("xhr", xhr);
        });
      });

      // 发布
      function handleSend() {
        // 获取用户 id username
        let userId = document.querySelector("#userId").value
        let userName = document.querySelector("#userName").value
        console.log('-----',userId)
        console.log('-----',userName)
        let data = {
          title: $("#content").val(),
          picture: $("#uploadVal").val(),
          createTime:new Date(),
          userId:userId,
          author:userName
        };
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            const res = JSON.parse(xhr.responseText);
            if (xhr.status === 200) {
              // 上传成功
              location.reload();
              console.log("发布成功", res);
            } else {
              // 上传失败
              console.log("上传失败", res);
            }
          }
        };
        xhr.open("POST", "http://localhost:8081/blog/publish", true);
        xhr.setRequestHeader('Content-type','application/json;charset=UTF-8')
        xhr.send(JSON.stringify(data));
        console.log("data", data);
      }



      xhr.open("GET", "http://localhost:8081/blog/list");
      xhr.send();


      function handleComment(id,i,userid){
        // var replyComment = document.getElementsByTagName("replyComment")[i].value;
        var replyComment =document.getElementsByClassName("replyComment")[i].value;
        let replayData = {
          reply: replyComment,
          blogId:id,
          userId:userid,

        };
        console.log('replayData',replayData)
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            const pubRes = JSON.parse(xhr.responseText);
            if (xhr.status === 200) {
              // 上传成功
              console.log("评论成功", pubRes);
              location.reload();
            } else {
              // 上传失败
              console.log("上传失败", pubRes);
            }
          }
        };
        xhr.open("POST", "http://localhost:8081/reply/add", true);
        xhr.setRequestHeader('Content-type','application/json;charset=UTF-8')
        xhr.send(JSON.stringify(replayData));
        location.reload();
      }
    </script>
  </body>
</html>
